<template>
  <div class="main-content"
       :style='{"minHeight":"100vh","padding":"0px 0px 20px","overflow":"hidden","color":"#666","background":"#f4f8fb","fontSize":"14px","position":"relative"}'>
    <!-- 列表页 -->
    <template v-if="showFlag">
      <el-form class="center-form-pv"
               :style='{"border":"0px solid #bababa","padding":"20px 20px 20px 0","margin":"0px 0 0","overflow":"hidden","borderRadius":"0px","background":"none","width":"auto","fontSize":"inherit"}'
               :inline="true" :model="searchForm">
        <el-row
            :style='{"padding":"20px","borderColor":"#4285f430","borderRadius":"0px","textAlign":"center","flexWrap":"wrap","background":"#4285f410","flexDirection":"row","borderWidth":"1px 1px 0","display":"flex","width":"100%","fontSize":"inherit","borderStyle":"solid"}'>
          <div :style='{"margin":"0 10px 0 0","fontSize":"inherit","flexWrap":"wrap","display":"flex"}'>
            <label
                :style='{"margin":"0 10px 0 0","color":"inherit","display":"inline-block","lineHeight":"32px","fontSize":"inherit","fontWeight":"500","height":"32px"}'
                class="item-label">患者姓名</label>
            <el-input v-model="searchForm.huanzhexingming" placeholder="患者姓名" @keydown.enter.native="search()"
                      clearable></el-input>
          </div>
          <el-button class="search" type="success" @click="search()">
            <span class="icon iconfont icon-chakan12"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none","height":"40px"}'></span>
            搜索
          </el-button>
        </el-row>

        <el-row class="actions"
                :style='{"padding":"0px 20px 10px","margin":"0","borderColor":"#4285f430","color":"#fff","textAlign":"left","flexDirection":"row","display":"block","flexWrap":"wrap","background":"#4285f410","borderWidth":"0 1px 1px","width":"100%","fontSize":"inherit","borderStyle":"solid"}'>
          <el-button class="add" v-if="isAuth('gaoxueyafenxi','新增')" type="success" @click="addOrUpdateHandler()">
            <span class="icon iconfont icon-tianjia13"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            添加信息
          </el-button>
          <el-button class="del" v-if="isAuth('gaoxueyafenxi','删除')" :disabled="dataListSelections.length?false:true"
                     type="danger" @click="deleteHandler()">
            <span class="icon iconfont icon-shanchu7"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none","height":"40px"}'></span>
            批量删除
          </el-button>

          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','导入')" type="success" @click="importHandler()">
            <span class="icon iconfont icon-daoru6"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            导入
          </el-button>
          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','上传模板')" type="success" @click="importClcik">
            <span class="icon iconfont icon-shangchuan1"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            上传模板
          </el-button>
          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','下载模板')" type="success"
                     @click="download('upload/gaoxueyafenxi_template.xlsx')">
            <span class="icon iconfont icon-xiazai7"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            下载模板
          </el-button>

          <download-excel v-if="isAuth('gaoxueyafenxi','导出')" class="export-excel-wrapper" :data="dataList"
                          :fields="json_fields" name="高血压分析.xls">
            <!-- 导出excel -->
            <el-button class="btn18" type="success">
              <span class="icon iconfont icon-daochu4"
                    :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
              导出
            </el-button>
          </download-excel>

          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','性别')" type="success" @click="chartDialog1()">
            <span class="icon iconfont icon-a-fenxiang2"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            性别
          </el-button>
          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','年龄')" type="success" @click="chartDialog2()">
            <span class="icon iconfont icon-a-fenxiang2"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            年龄
          </el-button>
          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','收缩压')" type="success" @click="chartDialog3()">
            <span class="icon iconfont icon-a-fenxiang2"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            收缩压
          </el-button>
          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','舒张压')" type="success" @click="chartDialog4()">
            <span class="icon iconfont icon-a-fenxiang2"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            舒张压
          </el-button>
          <el-button class="btn18" v-if="isAuth('gaoxueyafenxi','血糖水平')" type="success" @click="chartDialog5()">
            <span class="icon iconfont icon-a-fenxiang2"
                  :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none"}'></span>
            血糖水平
          </el-button>
        </el-row>
      </el-form>
      <div
          :style='{"border":"1px solid #e1e8ee","width":"calc(100% - 20px)","padding":"0","margin":"0","borderRadius":"0","background":"rgba(255,255,255,1)"}'>
        <el-table class="tables"
                  :stripe='false'
                  :style='{"padding":"0","borderColor":"#f4f4f4","color":"inherit","borderRadius":"0px","borderWidth":"0px 0px 0 0px","background":"none","width":"100%","fontSize":"inherit","borderStyle":"solid"}'
                  :border='true'
                  v-if="isAuth('gaoxueyafenxi','查看')"
                  :data="dataList"
                  v-loading="dataListLoading"
                  @selection-change="selectionChangeHandler">
          <el-table-column :resizable='true' type="selection" align="center" width="50"></el-table-column>
          <el-table-column :resizable='true' :sortable='true' label="序号" type="index" width="50"/>
          <el-table-column :resizable='true' :sortable='true'
                           prop="huanzhexingming"
                           label="患者姓名">
            <template slot-scope="scope">
              {{ scope.row.huanzhexingming }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="xingbie"
                           label="性别">
            <template slot-scope="scope">
              {{ scope.row.xingbie }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="nianling"
                           label="年龄">
            <template slot-scope="scope">
              {{ scope.row.nianling }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="shengao"
                           label="身高">
            <template slot-scope="scope">
              {{ scope.row.shengao }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="tizhong"
                           label="体重">
            <template slot-scope="scope">
              {{ scope.row.tizhong }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="shousuoya"
                           label="收缩压">
            <template slot-scope="scope">
              {{ scope.row.shousuoya }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="shuzhangya"
                           label="舒张压">
            <template slot-scope="scope">
              {{ scope.row.shuzhangya }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="xuetangshuiping"
                           label="血糖水平">
            <template slot-scope="scope">
              {{ scope.row.xuetangshuiping }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="dimidudanbai"
                           label="LDL-C">
            <template slot-scope="scope">
              {{ scope.row.dimidudanbai }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="gaomidudanbai"
                           label="HDL-C">
            <template slot-scope="scope">
              {{ scope.row.gaomidudanbai }}
            </template>
          </el-table-column>
          <el-table-column :resizable='true' :sortable='true'
                           prop="suggestion"
                           label="建议">
            <template slot-scope="scope">
              {{ scope.row.suggestion }}
            </template>
          </el-table-column>
          <el-table-column width="300" label="操作">
            <template slot-scope="scope">
              <el-button class="view" v-if=" isAuth('gaoxueyafenxi','查看')" type="success"
                         @click="addOrUpdateHandler(scope.row.id,'info')">
                <span class="icon iconfont icon-chakan14"
                      :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none","height":"40px"}'></span>
                查看
              </el-button>
              <el-button class="edit" v-if=" isAuth('gaoxueyafenxi','修改') " type="success"
                         @click="addOrUpdateHandler(scope.row.id)">
                <span class="icon iconfont icon-xiugai10"
                      :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none","height":"40px"}'></span>
                修改
              </el-button>


              <el-button class="del" v-if="isAuth('gaoxueyafenxi','删除') " type="primary"
                         @click="deleteHandler(scope.row.id )">
                <span class="icon iconfont icon-guanbi1"
                      :style='{"margin":"0 2px","fontSize":"inherit","color":"inherit","display":"none","height":"40px"}'></span>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          background
          :page-sizes="[10, 50, 100, 200]"
          :page-size="pageSize"
          :layout="layouts.join()"
          :total="totalPage"
          prev-text="上一页 "
          next-text="下一页 "
          :hide-on-single-page="false"
          :style='{"padding":"0 20px","margin":"20px 0 0","whiteSpace":"nowrap","color":"inherit","textAlign":"left","width":"100%","clear":"both","fontSize":"inherit","fontWeight":"500"}'
      ></el-pagination>
    </template>

    <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>


    <el-dialog title="导入" :visible.sync="importVisiable" width="50%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item class="upload" label="文件" prop="excelFile">
          <excel-file-upload
              tip="点击上传直接导入excel文件"
              action="gaoxueyafenxi/importExcel"
              :limit="1"
              :fileUrls="''"
              @change="importChange"
          ></excel-file-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
				<el-button @click="importHandler()">关 闭</el-button>
			</span>
    </el-dialog>
    <el-dialog title="上传模板" :visible.sync="importVis" width="50%">
      <el-form ref="form" :model="importForm" label-width="80px">
        <el-form-item class="upload" label="文件" prop="excelFile">
          <el-upload class="upload-demo" drag :action="$base.url + 'file/upload?type=gaoxueyafenxi_template'"
                     :show-file-list="false" :on-success="importSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="importVis=false">关 闭</el-button>
            </span>
    </el-dialog>

    <el-dialog
        :visible.sync="chartVisiable1"
        width="800">
      <div id="xingbieChart1" style="width:100%;height:600px;"></div>
      <span slot="footer" class="dialog-footer">
			<el-button @click="chartDialog1">返回</el-button>
		  </span>
    </el-dialog>
    <el-dialog
        :visible.sync="chartVisiable2"
        width="800">
      <div id="nianlingChart2" style="width:100%;height:600px;"></div>
      <span slot="footer" class="dialog-footer">
			<el-button @click="chartDialog2">返回</el-button>
		  </span>
    </el-dialog>
    <el-dialog
        :visible.sync="chartVisiable3"
        width="800">
      <div id="shousuoyaChart3" style="width:100%;height:600px;"></div>
      <span slot="footer" class="dialog-footer">
			<el-button @click="chartDialog3">返回</el-button>
		  </span>
    </el-dialog>
    <el-dialog
        :visible.sync="chartVisiable4"
        width="800">
      <div id="shuzhangyaChart4" style="width:100%;height:600px;"></div>
      <span slot="footer" class="dialog-footer">
			<el-button @click="chartDialog4">返回</el-button>
		  </span>
    </el-dialog>
    <el-dialog
        :visible.sync="chartVisiable5"
        width="800">
      <div id="xuetangshuipingChart5" style="width:100%;height:600px;"></div>
      <span slot="footer" class="dialog-footer">
			<el-button @click="chartDialog5">返回</el-button>
		  </span>
    </el-dialog>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
import AddOrUpdate from "./add-or-update";

export default {
  data() {
    return {
      searchForm: {
        key: ""
      },
      form: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      showFlag: true,
      importVisiable: false,
      importVis: false,
      importForm: {},
      chartVisiable1: false,
      chartVisiable2: false,
      chartVisiable3: false,
      chartVisiable4: false,
      chartVisiable5: false,
      addOrUpdateFlag: false,
      layouts: ["total", "prev", "pager", "next"],
//导出excel
      json_fields: {
        "患者姓名": "huanzhexingming",    //常规字段
        "性别": "xingbie",    //常规字段
        "年龄": "nianling",    //常规字段
        "身高": "shengao",    //常规字段
        "体重": "tizhong",    //常规字段
        "收缩压": "shousuoya",    //常规字段
        "舒张压": "shuzhangya",    //常规字段
        "血糖水平": "xuetangshuiping",    //常规字段
        "LDL-C": "dimidudanbai",    //常规字段
        "HDL-C": "gaomidudanbai",    //常规字段
        "建议": "suggestion",    //常规字段
      },
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ],
    };
  },
  created() {
    this.init();
    this.getDataList();
    this.contentStyleChange()
  },
  mounted() {
  },
  filters: {
    htmlfilter: function (val) {
      return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
    }
  },
  computed: {
    tablename() {
      return this.$storage.get('sessionTable')
    },
  },
  components: {
    AddOrUpdate,
  },
  methods: {
    contentStyleChange() {
      this.contentPageStyleChange()
    },
    // 分页
    contentPageStyleChange() {
      let arr = []

      // if(this.contents.pageTotal) arr.push('total')
      // if(this.contents.pageSizes) arr.push('sizes')
      // if(this.contents.pagePrevNext){
      //   arr.push('prev')
      //   if(this.contents.pagePager) arr.push('pager')
      //   arr.push('next')
      // }
      // if(this.contents.pageJumper) arr.push('jumper')
      // this.layouts = arr.join()
      // this.contents.pageEachNum = 10
    },


//统计接口
    chartDialog1() {
      this.chartVisiable1 = !this.chartVisiable1;
      this.$nextTick(() => {
        var xingbieChart1 = echarts.init(document.getElementById("xingbieChart1"), 'macarons');
        this.$http({
          url: "gaoxueyafenxi/group/xingbie",
          method: "get",
        }).then(({data}) => {
          if (data && data.code === 0) {
            let res = data.data;
            let xAxis = [];
            let yAxis = [];
            let pArray = []
            for (let i = 0; i < res.length; i++) {
              xAxis.push(res[i].xingbie);
              yAxis.push(parseFloat((res[i].total)));
              pArray.push({
                value: parseFloat((res[i].total)),
                name: res[i].xingbie
              })
            }
            var option = {};
            option = {
              title: {
                text: '性别',
                left: 'center'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
              },
              series: [
                {
                  type: 'pie',
                  radius: ['25%', '55%'],
                  center: ['50%', '60%'],
                  data: pArray,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            xingbieChart1.setOption(option);
            //根据窗口的大小变动图表
            window.onresize = function () {
              xingbieChart1.resize();
            };
          }
        });
      })
    },

//统计接口
    chartDialog2() {
      this.chartVisiable2 = !this.chartVisiable2;
      this.$nextTick(() => {

        var nianlingChart2 = echarts.init(document.getElementById("nianlingChart2"), 'macarons');
        this.$http({
          url: "gaoxueyafenxi/sectionStat/nianling",
          method: "get",
        }).then(({data}) => {
          if (data && data.code === 0) {
            let res = data.data;
            let xAxis = [];
            let yAxis = [];
            let pArray = []
            for (let i = 0; i < res.length; i++) {
              xAxis.push(res[i].nianling);
              yAxis.push(parseFloat((res[i].total)));
              pArray.push({
                value: parseFloat((res[i].total)),
                name: res[i].nianling
              })
            }
            var option = {};
            option = {
              title: {
                text: '年龄',
                left: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}'
              },
              xAxis: {
                type: 'category',
                data: xAxis,
                axisLabel: {
                  rotate: 40
                }
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: yAxis,
                type: 'bar'
              }]
            };
            // 使用刚指定的配置项和数据显示图表。
            nianlingChart2.setOption(option);
            //根据窗口的大小变动图表
            window.onresize = function () {
              nianlingChart2.resize();
            };
          }
        });
      })
    },

//统计接口
    chartDialog3() {
      this.chartVisiable3 = !this.chartVisiable3;
      this.$nextTick(() => {

        var shousuoyaChart3 = echarts.init(document.getElementById("shousuoyaChart3"), 'macarons');
        this.$http({
          url: "gaoxueyafenxi/group/shousuoya",
          method: "get",
        }).then(({data}) => {
          if (data && data.code === 0) {
            let res = data.data;
            let xAxis = [];
            let yAxis = [];
            let pArray = []
            for (let i = 0; i < res.length; i++) {
              xAxis.push(res[i].shousuoya);
              yAxis.push(parseFloat((res[i].total)));
              pArray.push({
                value: parseFloat((res[i].total)),
                name: res[i].shousuoya
              })
            }
            var option = {};
            option = {
              title: {
                text: '收缩压',
                left: 'center'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
              },
              series: [
                {
                  type: 'pie',
                  radius: ['25%', '55%'],
                  roseType: 'area',
                  center: ['50%', '60%'],
                  data: pArray,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            shousuoyaChart3.setOption(option);
            //根据窗口的大小变动图表
            window.onresize = function () {
              shousuoyaChart3.resize();
            };
          }
        });
      })
    },

//统计接口
    chartDialog4() {
      this.chartVisiable4 = !this.chartVisiable4;
      this.$nextTick(() => {

        var shuzhangyaChart4 = echarts.init(document.getElementById("shuzhangyaChart4"), 'macarons');
        this.$http({
          url: "gaoxueyafenxi/group/shuzhangya",
          method: "get",
        }).then(({data}) => {
          if (data && data.code === 0) {
            let res = data.data;
            let xAxis = [];
            let yAxis = [];
            let pArray = []
            for (let i = 0; i < res.length; i++) {
              xAxis.push(res[i].shuzhangya);
              yAxis.push(parseFloat((res[i].total)));
              pArray.push({
                value: parseFloat((res[i].total)),
                name: res[i].shuzhangya
              })
            }
            var option = {};
            option = {
              title: {
                text: '舒张压',
                left: 'center'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
              },
              series: [
                {
                  type: 'pie',
                  radius: ['25%', '55%'],
                  roseType: 'area',
                  center: ['50%', '60%'],
                  data: pArray,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            shuzhangyaChart4.setOption(option);
            //根据窗口的大小变动图表
            window.onresize = function () {
              shuzhangyaChart4.resize();
            };
          }
        });
      })
    },

//统计接口
    chartDialog5() {
      this.chartVisiable5 = !this.chartVisiable5;
      this.$nextTick(() => {

        var xuetangshuipingChart5 = echarts.init(document.getElementById("xuetangshuipingChart5"), 'macarons');
        this.$http({
          url: "gaoxueyafenxi/group/xuetangshuiping",
          method: "get",
        }).then(({data}) => {
          if (data && data.code === 0) {
            let res = data.data;
            let xAxis = [];
            let yAxis = [];
            let pArray = []
            for (let i = 0; i < res.length; i++) {
              xAxis.push(res[i].xuetangshuiping);
              yAxis.push(parseFloat((res[i].total)));
              pArray.push({
                value: parseFloat((res[i].total)),
                name: res[i].xuetangshuiping
              })
            }
            var option = {};
            let prrLength = pArray.length > 8 ? 8 : pArray.length
            for (let x = 0; x < prrLength; x++) {
              pArray[x] = Object.assign(pArray[x], {
                title: {
                  offsetCenter: [String((-140 + (x) * 40) + '%'), '80%']
                },
                detail: {
                  offsetCenter: [String((-140 + (x) * 40) + '%'), '95%']
                }
              })
            }
            option = {
              title: {
                text: '血糖水平',
                left: 'center',
                top: 'top'
              },
              series: [{
                type: 'gauge',
                anchor: {
                  show: true,
                  showAbove: true,
                  size: 18,
                  itemStyle: {
                    color: 'inherit'
                  }
                },
                pointer: {
                  icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                  width: 8,
                  length: '80%',
                  offsetCenter: [0, '10%']
                },
                progress: {
                  show: true,
                  overlap: true,
                  roundCap: true
                },
                axisLine: {
                  roundCap: true
                },
                data: pArray,
                title: {
                  fontSize: 14
                },
                splitNumber: 25,
                animation: true,
                emphasis: {
                  disabled: false
                },
                axisLine: {
                  roundCap: true,
                  lineStyle: {
                    shadowColor: '#000',
                    shadowBlur: 1,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    opacity: 0.5
                  }
                },
                detail: {
                  width: 40,
                  height: 14,
                  fontSize: 14,
                  color: '#fff',
                  backgroundColor: 'inherit',
                  borderRadius: 3,
                  formatter: '{value}'
                }
              }]
            }
            // 使用刚指定的配置项和数据显示图表。
            xuetangshuipingChart5.setOption(option);
            //根据窗口的大小变动图表
            window.onresize = function () {
              xuetangshuipingChart5.resize();
            };
          }
        });
      })
    },
    init() {
    },
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },

    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      }
      if (this.searchForm.huanzhexingming != '' && this.searchForm.huanzhexingming != undefined) {
        params['huanzhexingming'] = '%' + this.searchForm.huanzhexingming + '%'
      }
      let user = JSON.parse(this.$storage.getObj('userForm'))
      console.log(user)
      this.$http({
        url: "gaoxueyafenxi/page",
        method: "get",
        params: params
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.data.list;
          this.totalPage = data.data.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandler(val) {
      this.dataListSelections = val;
    },
    // 添加/修改
    addOrUpdateHandler(id, type) {
      this.showFlag = false;
      this.addOrUpdateFlag = true;
      this.crossAddOrUpdateFlag = false;
      if (type != 'info') {
        type = 'else';
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, type);
      });
    },
    importChange() {
      this.importHandler()
      this.getDataList()
    },
    importClcik() {
      this.importVis = true
    },
    importSuccess(e) {
      if (e.code == 0) {
        this.$message.success('上传成功');
        this.importVis = false

      }
    },
    importHandler() {
      this.importVisiable = !this.importVisiable;
    },
    // 下载
    download(file) {
      let arr = file.replace(new RegExp('upload/', "g"), "")
      axios.get(this.$base.url + 'file/download?fileName=' + arr, {
        headers: {
          token: this.$storage.get('Token')
        },
        responseType: "blob"
      }).then(({
                 data
               }) => {
        const binaryData = [];
        binaryData.push(data);
        const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
          type: 'application/pdf;chartset=UTF-8'
        }))
        const a = document.createElement('a')
        a.href = objectUrl
        a.download = arr
        // a.click()
        // 下面这个写法兼容火狐
        a.dispatchEvent(new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window
        }))
        window.URL.revokeObjectURL(data)
      }, err => {
        axios.get((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] : '') + this.$base.name + '/file/download?fileName=' + arr, {
          headers: {
            token: this.$storage.get('Token')
          },
          responseType: "blob"
        }).then(({
                   data
                 }) => {
          const binaryData = [];
          binaryData.push(data);
          const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
            type: 'application/pdf;chartset=UTF-8'
          }))
          const a = document.createElement('a')
          a.href = objectUrl
          a.download = arr
          // a.click()
          // 下面这个写法兼容火狐
          a.dispatchEvent(new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
          }))
          window.URL.revokeObjectURL(data)
        })
      })
    },
    // 预览
    preClick(file) {
      if (!file) {
        return false
      }
      window.open((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] + this.$base.name + '/' + file : this.$base.url + file))
    },
    gaoxueyafenxistatusChange(e, row) {
      if (row.status == 0) {
        row.passwordwrongnum = 0
      }
      this.$http({
        url: 'gaoxueyafenxi/update',
        method: 'post',
        data: row
      }).then(res => {
        if (row.status == 1) {
          this.$message.error('该用户已锁定')
        } else {
          this.$message.success('该用户已解除锁定')
        }
      })
    },
    // 删除
    async deleteHandler(id) {
      var ids = id ? [Number(id)] : this.dataListSelections.map(item => {
        return Number(item.id);
      });
      await this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http({
          url: "gaoxueyafenxi/delete",
          method: "post",
          data: ids
        }).then(async ({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.search();
              }
            });

          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },


  }

};
</script>
<style lang="scss" scoped>
//导出excel
.export-excel-wrapper {
  display: inline-block;
}

.center-form-pv {
  .el-date-editor.el-input {
    width: auto;
  }
}

.el-input {
  width: auto;
}

// form
.center-form-pv .el-input /deep/ .el-input__inner {
  border: 1px solid #e1e8ee;
  border-radius: 0px;
  padding: 0 12px;
  outline: none;
  color: inherit;
  background: #fff;
  width: 150px;
  font-size: inherit;
  height: 32px;
}

.center-form-pv .el-select /deep/ .el-input__inner {
  border: 1px solid #e1e8ee;
  border-radius: 0px;
  padding: 0 10px;
  outline: none;
  color: inherit;
  background: #fff;
  width: 150px;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .el-date-editor /deep/ .el-input__inner {
  border: 1px solid #e1e8ee;
  border-radius: 0px;
  padding: 0 10px 0 30px;
  outline: none;
  color: inherit;
  background: #fff;
  width: 150px;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .search {
  cursor: pointer;
  padding: 0 20px;
  margin: 0 10px;
  color: #fff;
  font-size: 14px;
  border-color: #1576c2;
  transition: all 0.3s;
  border-radius: 0px;
  outline: none;
  background: #78bcee;
  width: auto;
  border-width: 0 0 0px;
  border-style: solid;
  min-width: 80px;
  height: 34px;
}

.center-form-pv .search:hover {
  color: #333;
}

.center-form-pv .actions .add {
  border: 1px solid #03a9f4;
  cursor: pointer;
  border-radius: 2px;
  padding: 0 10px;
  margin: 0 8px 10px 0;
  color: #03a9f4;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 26px;
}

.center-form-pv .actions .add:hover {
  color: #fff;
  background: #03a9f4;
}

.center-form-pv .actions .del {
  border: 1px solid #ed5564;
  cursor: pointer;
  border-radius: 2px;
  padding: 0 10px;
  margin: 0 8px 10px 0;
  color: #ed5564;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 26px;
}

.center-form-pv .actions .del:hover {
  color: #fff;
  background: #ed5564;
}

.center-form-pv .actions .statis {
  border: 1px solid #7dc855;
  cursor: pointer;
  border-radius: 2px;
  padding: 0 10px;
  margin: 0 8px 10px 0;
  color: #7dc855;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 26px;
}

.center-form-pv .actions .statis:hover {
}

.center-form-pv .actions .btn18 {
  border: 1px solid #6c757d;
  cursor: pointer;
  border-radius: 2px;
  padding: 0 10px;
  margin: 0 8px 10px 0;
  color: #6c757d;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 26px;
}

.center-form-pv .actions .btn18:hover {
  color: #fff;
  background: #6c757d;
}

// table
.el-table /deep/ .el-table__header-wrapper thead {
  color: inherit;
  background: rgba(254, 169, 34, 0);
  width: 100%;
}

.el-table /deep/ .el-table__header-wrapper thead tr {
  background: none;
}

.el-table /deep/ .el-table__header-wrapper thead tr th {
  padding: 12px 0;
  color: #333;
  background: none;
  border-color: #e1e8ee;
  border-width: 0 1px 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table /deep/ .el-table__header-wrapper thead tr th .cell {
  padding: 0 10px;
  word-wrap: normal;
  word-break: break-all;
  white-space: normal;
  font-weight: 600;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  line-height: 24px;
  position: relative;
  text-overflow: ellipsis;
}


.el-table /deep/ .el-table__body-wrapper tbody {
  padding: 0;
  width: 100%;
}

.el-table /deep/ .el-table__body-wrapper tbody tr {
  background: none;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td {
  padding: 2px 0;
  color: inherit;
  background: none;
  font-size: inherit;
  border-color: #e1e8ee;
  border-width: 0 1px 1px 0px;
  border-style: solid;
  text-align: left;
}


.el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
  padding: 2px 0;
  color: inherit;
  background: #f5f8fa;
  font-weight: 600;
  border-color: #e1e8ee;
  border-width: 0 1px 1px 0px;
  border-style: solid;
  text-align: left;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td {
  padding: 2px 0;
  color: inherit;
  background: none;
  font-size: inherit;
  border-color: #e1e8ee;
  border-width: 0 1px 1px 0px;
  border-style: solid;
  text-align: left;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
  padding: 0 10px;
  overflow: hidden;
  color: inherit;
  word-break: break-all;
  white-space: normal;
  line-height: 24px;
  text-overflow: ellipsis;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .view {
  border: 0px solid rgba(24, 138, 226, 0.1);
  cursor: pointer;
  border-radius: 2px;
  padding: 0 16px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #03a9f4;
  width: auto;
  font-size: 12px;
  min-width: 40px;
  height: 26px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .view:hover {
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .add {
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .add:hover {
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .edit {
  border: 0px solid rgba(16, 196, 105, 0.1);
  cursor: pointer;
  border-radius: 2px;
  padding: 0 16px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #7dc855;
  width: auto;
  font-size: 12px;
  min-width: 40px;
  height: 26px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .edit:hover {
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .del {
  border: 1px solid rgba(255, 91, 91, 0.1);
  cursor: pointer;
  border-radius: 2px;
  padding: 0 16px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #ed5564;
  width: auto;
  font-size: 12px;
  height: 26px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .del:hover {
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8 {
  border: 0px solid rgba(114, 123, 132, 0.1);
  cursor: pointer;
  border-radius: 2px;
  padding: 0 16px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #6c757d;
  width: auto;
  font-size: 12px;
  height: 26px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8:hover {
}

// pagination
.main-content .el-pagination /deep/ .el-pagination__total {
  margin: 0 10px 0 0;
  color: inherit;
  font-weight: 400;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-prev {
  border: none;
  border-radius: 2px;
  padding: 0 5px;
  margin: 0 5px;
  color: inherit;
  background: none;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  min-width: 35px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-next {
  border: none;
  border-radius: 2px;
  padding: 0 5px;
  margin: 0 5px;
  color: inherit;
  background: none;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  min-width: 35px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-prev:disabled {
  border: none;
  cursor: not-allowed;
  border-radius: 2px;
  padding: 0 5px;
  margin: 0 5px;
  color: #999;
  background: none;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .btn-next:disabled {
  border: none;
  cursor: not-allowed;
  border-radius: 2px;
  padding: 0 5px;
  margin: 0 5px;
  color: #999;
  background: none;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pager {
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
}

.main-content .el-pagination /deep/ .el-pager .number {
  cursor: pointer;
  padding: 0 4px;
  margin: 0 5px;
  color: inherit;
  background: none;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 24px;
  text-align: center;
  height: 24px;
}

.main-content .el-pagination /deep/ .el-pager .number:hover {
  cursor: pointer;
  padding: 0 4px;
  margin: 0 5px;
  color: rgba(24, 138, 226, 1);
  background: rgba(24, 138, 226, 0.15);
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 24px;
  text-align: center;
  height: 24px;
}

.main-content .el-pagination /deep/ .el-pager .number.active {
  cursor: default;
  padding: 0 4px;
  margin: 0 5px;
  color: rgba(24, 138, 226, 1);
  background: rgba(24, 138, 226, 0.15);
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 24px;
  text-align: center;
  height: 24px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes {
  color: inherit;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
  margin: 0 5px;
  color: inherit;
  width: 100px;
  font-size: inherit;
  position: relative;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
  border: 0px solid #ddd;
  cursor: pointer;
  padding: 0 25px 0 8px;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: 28px;
  border-radius: 3px;
  outline: 0;
  background: none;
  width: 100%;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
  top: 0;
  position: absolute;
  right: 0;
  height: 100%;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
  cursor: pointer;
  color: #C0C4CC;
  width: 25px;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

.main-content .el-pagination /deep/ .el-pagination__jump {
  margin: 0 0 0 24px;
  color: inherit;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__jump .el-input {
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 2px;
  color: inherit;
  display: inline-block;
  width: 50px;
  font-size: inherit;
  line-height: 18px;
  position: relative;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
  border: 1px solid #eee;
  cursor: pointer;
  padding: 0 0px;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: 24px;
  border-radius: 3px;
  outline: 0;
  background: none;
  width: auto;
  text-align: center;
  height: 24px;
}

// list one
.one .list1-view {
  border: 1px solid #0260ad30;
  cursor: pointer;
  border-radius: 20px;
  padding: 0 6px 0 4px;
  margin: 0px 5px 5px 0;
  outline: none;
  color: #333;
  background: linear-gradient(45deg, rgba(233, 245, 255, 1) 0%, rgba(253, 254, 255, 1) 50%, rgba(233, 245, 255, 1) 100%);
  width: auto;
  font-size: inherit;
  height: 32px;
}

.one .list1-view:hover {
  transform: scale(0.9);
  opacity: 0.8;
}

.one .list1-edit {
  border: 1px solid #0260ad30;
  cursor: pointer;
  border-radius: 20px;
  padding: 0 6px 0 4px;
  margin: 0px 5px 5px 0;
  outline: none;
  color: #333;
  background: linear-gradient(45deg, rgba(233, 245, 255, 1) 0%, rgba(253, 254, 255, 1) 50%, rgba(233, 245, 255, 1) 100%);
  width: auto;
  font-size: inherit;
  height: 32px;
}

.one .list1-edit:hover {
  transform: scale(0.9);
  opacity: 0.8;
}

.one .list1-del {
  border: 1px solid #0260ad30;
  cursor: pointer;
  border-radius: 20px;
  padding: 0 6px 0 4px;
  margin: 0px 5px 5px 0;
  outline: none;
  color: #333;
  background: linear-gradient(45deg, rgba(233, 245, 255, 1) 0%, rgba(253, 254, 255, 1) 50%, rgba(233, 245, 255, 1) 100%);
  width: auto;
  font-size: inherit;
  height: 32px;
}

.one .list1-del:hover {
  transform: scale(0.9);
  opacity: 0.8;
}

.one .list1-btn8 {
  border: 1px solid #0260ad30;
  cursor: pointer;
  border-radius: 20px;
  padding: 0 6px 0 4px;
  margin: 0px 5px 5px 0;
  outline: none;
  color: #333;
  background: linear-gradient(45deg, rgba(233, 245, 255, 1) 0%, rgba(253, 254, 255, 1) 50%, rgba(233, 245, 255, 1) 100%);
  width: auto;
  font-size: inherit;
  height: 32px;
}

.one .list1-btn8:hover {
  transform: scale(0.9);
  opacity: 0.8;
}

.main-content .el-table .el-switch {
  display: inline-flex;
  vertical-align: middle;
  line-height: 30px;
  position: relative;
  align-items: center;
  height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__label--left {
  cursor: pointer;
  margin: 0 10px 0 0;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: .2s;
  height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__label--right {
  cursor: pointer;
  margin: 0 0 0 10px;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: .2s;
  height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__core {
  border: 0px solid #188ae2;
  cursor: pointer;
  border-radius: 20px;
  margin: 0;
  outline: 0;
  background: #b0d5f6;
  display: inline-block;
  width: 40px;
  box-sizing: border-box;
  transition: border-color .3s, background-color .3s;
  height: 18px;
}

.main-content .el-table .el-switch /deep/ .el-switch__core::after {
  border-radius: 100%;
  top: 1px;
  left: 1px;
  background: #FFF;
  width: 16px;
  position: absolute;
  transition: all .3s;
  height: 16px;
}

.main-content .el-table .el-switch.is-checked /deep/ .el-switch__core::after {
  margin: 0 0 0 -17px;
  left: 100%;
}

.main-content .el-table .el-rate /deep/ .el-rate__item {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  position: relative;
}

.main-content .el-table .el-rate /deep/ .el-rate__item .el-rate__icon {
  margin: 0 3px;
  color: #212529;
  display: inline-block;
  font-size: 18px;
  position: relative;
  transition: .3s;
}

</style>
